import { useState } from 'react'
import { Table, Space, Button , Popconfirm, message , Modal , Form , Input } from 'antd'
import { useAntdTable } from 'ahooks'
import { ColumnsType } from 'antd/lib/table'
import { deleteType , typePage , addOrUpdateArticleType } from '@/service/article'
import { useNavigate } from 'react-router-dom'
import { formatTime } from '@/utils'
import './index.less'

const { Item } = Form

export default function () {

  const { tableProps , run:reload } = useAntdTable(async ({ current , pageSize}) => {
    const {records , total } = await typePage({
      current,
      pageSize
    })
    return {
      total,
      list:records
    }
  })

  const [typeForm] = Form.useForm()

  const [action , setAction ] = useState<boolean>(true)

  const navigate = useNavigate()

  const [visible , setVisible ] = useState<boolean>(false)

  const columns:ColumnsType<any> = [
    {
      title: "类型名称",
      dataIndex: 'label',
      align:'center'
    },
    {
      title: "类型属性",
      dataIndex:'prop',
      align:'center'
    },
    {
      title: "类型描述",
      dataIndex:'article_type_desc',
      align: 'center'
    },
    {
      title: "创建时间",
      dataIndex:'create_time',
      align: 'center',
      render:(_ , record)=> formatTime(record.create_time)
    },
    {
      title: "更新时间",
      dataIndex:'updated_time',
      align:'center',
      render:(_ , record)=> formatTime(record.updated_time)
    },
    {
      title: "操作",
      width:150,
      align:'center',
      render: (_ , record) => {
        return (
          <Space>
            <Popconfirm
              title="确认是否删除"
              onConfirm={async () => {
                const response = await deleteType({ id: record.id })
                if (response) {
                  message.success("删除成功")
                  reload({...tableProps.pagination})
                } else {
                  message.error("删除失败")
                }
              }}
            >
              <Button type="link" danger>删除</Button>
            </Popconfirm>
            <Button type="link" onClick={() => {
              setAction(false)
              setVisible(true)
              typeForm.setFieldsValue({...record})
            }}>
              编辑
            </Button>
          </Space>
        )
      }
    },
  ]

  return (
    <div>
      <div className="action">
        <Button type="primary" onClick={() => {
          setVisible(true)
          typeForm.resetFields();
        }}>新增</Button>
      </div>
      <Table bordered size="small" columns={columns} {...tableProps} rowKey="id" />
      <Modal
        title={ action ? '新增类型' : '编辑类型' }
        open={visible}
        onOk={async () => {
          await typeForm.validateFields();
          const values = typeForm.getFieldsValue();
          const result = await addOrUpdateArticleType({ ...values })
          if (result) {
            message.success(`${action ? '新增' : '编辑'}成功`)
            reload({...tableProps.pagination})
            setVisible(false)
          }
        }}
        onCancel={() => setVisible(false)}
      >
        <Form form={typeForm} size="small" style={{ marginTop: '25px' }}>
          <Item label="" name="id" style={{display:'none'}}>
            <Input />
          </Item>
          <Item label="类型名称" name="label" rules={[{ required:true, message:'名称必填' }]}>
            <Input />
          </Item>
          <Item label="类型属性" name="prop" rules={[{ required:true, message:'属性必填' }]}>
            <Input />
          </Item>
          <Item label="类型描述" name="article_type_desc" rules={[{ required:true, message:'描述必填' }]}>
            <Input.TextArea />
          </Item>
        </Form>
      </Modal>
    </div>
  )
}